var gulp = require('gulp');
var del = require('del'); //删除文件和文件夹
//为静态文件随机添加一串hash值, 解决cdn缓存问题, a.css --> a-d2f3f35d3.css
// 根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。
var rev = require('gulp-rev');
var nano = require('gulp-cssnano'); //压缩css
var uglify = require('gulp-uglify')
var useref = require('gulp-useref');  //将HTML引用的多个CSS和JS合并起来
var imagemin = require('gulp-imagemin');
var revCollector = require('gulp-rev-collector'); //根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径
// Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面
var browserSync = require('browser-sync').create();
var gulpSequence = require('gulp-sequence');  //gulp的task默认都是并行(异步)执行,gulp-sequence可以提供串行执行task的功能
var uncss = require('gulp-uncss');  //精简css文件,去掉没用的css代码
var htmlmin = require('gulp-htmlmin');
var base64 = require('gulp-base64');
var changed = require('gulp-changed');  //该插件能够实现只编译或打包改变过文件，大大加快了gulp task的执行速度。
var postcss = require("gulp-postcss");
var sprites = require('postcss-sprites').default; //合成精灵图(雪碧图)
var autoprefixer = require('autoprefixer');
// CSS Grace 是一个由 PostCSS 驱动，面向未来的 CSS 后处理工具
// 向前，CSS Grace 可以作为一种 Polyfill 工具，让你可以提前使用一些 CSS3 的新特性。
// 向后，CSS Grace 可以生成兼容旧浏览器的各种 Hack，让你无需担忧兼容性。
// 而你，只用书写和关心标准的 CSS 语法。
var cssgrace = require('cssgrace');
var sass = require('gulp-sass');
const pxtorem = require('postcss-pxtorem')  //px转rem

var SRC_DIR = './src/';
var PKG_DIR = './tmp/pkg/';
var REV_DIR = './tmp/rev/';
var DST_DIR = './dist/';
var UNCSS_REG = [/.advise/, /.block/, /.g-bd .m-view-2 .category li:nth-child/, /^.g-bd ul li .info/, /.hljs/];

const processors = pxtorem({
  rootValue: 100,
  propList: ['*', '!border*'],
})

gulp.task('clean', function () {
  return del(['dist', 'tmp']);
});
// pc端px不用自动转成rem
gulp.task('sass-pc', function () {
  return gulp.src(SRC_DIR + 'scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest(SRC_DIR + 'css/'));
});
// 如果写移动端就px转rem
gulp.task('sass-mobie', function () {
  return gulp.src(SRC_DIR + 'scss/*.scss')
    .pipe(sass())
    .pipe(postcss([processors]))
    .pipe(gulp.dest(SRC_DIR + 'css/'));
});

/*
 * 合并请求
 * <!-- build:css ../css/index.pkg.css --><!-- endbuild -->
 * <!-- build:js ../js/index.pkg.js --><!-- endbuild -->
 */
gulp.task('pkg', function () {
  return gulp.src(SRC_DIR + 'view/*.html', { allowEmpty: true })
    .pipe(useref())
    .pipe(gulp.dest(PKG_DIR + 'view/'));
});

/*
 * 移动非jpg/png资源到img文件夹
 * 
 */
gulp.task('move-img-other', function () {
  return gulp.src([SRC_DIR + 'img/**/*.*!(jpg|png)', SRC_DIR + 'component/img/**/*.*!(jpg|png)'])
    .pipe(gulp.dest('./tmp/pkg/img/'));
});

/*
 * 压缩IMG
 * 
 */
gulp.task('min-img', function () {
  return gulp.src([SRC_DIR + 'img/**/*.*(jpg|png)', SRC_DIR + 'component/img/**/*.*(jpg|png)'])
    .pipe(imagemin())
    .pipe(gulp.dest('./tmp/pkg/img/'));
});

/*
 * 压缩CSS(PC)
 * 
 */
gulp.task("min-css-pc", function () {
  // PostCSS
  var processors = [
    sprites({
      'stylesheetPath': PKG_DIR + 'css/',
      'spritePath': PKG_DIR + 'img/'
    }),
    autoprefixer({
      browsers: ['> 1%', 'last 2 versions', 'ie 6-11']
    }),
    cssgrace
  ];
  return gulp.src([PKG_DIR + 'css/**/*.css'])
    .pipe(uncss({
      html: [PKG_DIR + '**/*.html'],
      ignore: UNCSS_REG
    })).pipe(nano({
      discardComments: {
        removeAll: true
      }
    }))
    .pipe(postcss(processors))
    .pipe(gulp.dest(PKG_DIR + 'css/'))
});

/*
 * 压缩CSS(Mobile)
 * 
 */
gulp.task("min-css-mobile", function () {
  // PostCSS
  var processors = [
    autoprefixer({
      browsers: ['> 1%', 'last 2 versions']
    })
  ];
  return gulp.src([PKG_DIR + 'css/**/*.css'])
    .pipe(uncss({
      html: [PKG_DIR + '**/*.html'],
      ignore: UNCSS_REG
    })).pipe(nano({
      discardComments: {
        removeAll: true
      }
    }))
    .pipe(postcss(processors))
    .pipe(gulp.dest(PKG_DIR + 'css/'))
});

/*
 * 压缩JS
 * 
 */
gulp.task('min-js', function () {
  return gulp.src(PKG_DIR + 'js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest(PKG_DIR + 'js/'));
});

/*
 * 版本化IMG
 * 
 */
gulp.task('rev-img', function () {
  return gulp.src(PKG_DIR + 'img/**/*')
    .pipe(rev())
    .pipe(gulp.dest(REV_DIR + 'img/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(REV_DIR + 'img/'));
});

/*
 * 版本化CSS
 * 
 */
gulp.task('rev-css', function () {
  return gulp.src(PKG_DIR + 'css/**/*')
    .pipe(rev())
    .pipe(gulp.dest(REV_DIR + 'css/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(REV_DIR + 'css/'));
});

/*
 * 版本化JS
 * 
 */
gulp.task('rev-js', function () {
  return gulp.src(PKG_DIR + 'js/**/*')
    .pipe(rev())
    .pipe(gulp.dest(REV_DIR + 'js/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(REV_DIR + 'js/'));
});

/*
 * 收集图片到CSS
 */
gulp.task('col-css', function () {
  return gulp.src([REV_DIR + 'img/*.json', REV_DIR + 'css/*.css'])
    .pipe(revCollector())
    .pipe(gulp.dest(DST_DIR + 'css/'));
});

/*
 * 移动IMG文件到目标文件夹
 */
gulp.task('col-img', function () {
  return gulp.src([REV_DIR + 'img/*', '!' + REV_DIR + '/img/*.json'])
    .pipe(gulp.dest(DST_DIR + 'img/'));
});

/*
 * 移动JS文件到目标文件夹
 */
gulp.task('col-js', function () {
  return gulp.src(REV_DIR + 'js/*.js')
    .pipe(gulp.dest(DST_DIR + 'js/'));
});

/*
 * 收集资源到HTML
 */
gulp.task('col-html', function () {
  return gulp.src([REV_DIR + '**/*.json', PKG_DIR + 'view/*.html'])
    .pipe(revCollector())
    .pipe(htmlmin({
      // collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest(DST_DIR + 'view/'));
});

/*
 * 移动mock文件夹
 */
gulp.task('move-mock', function () {
  return gulp.src(SRC_DIR + 'mock/**/*')
    .pipe(gulp.dest(DST_DIR + 'mock/'));
});

/*
 * 图片base64
 */
gulp.task('base64', function () {
  return gulp.src(PKG_DIR + '/**/*.css')
    .pipe(base64({
      extensions: ['svg', 'png', /\.jpg#datauri$/i],
    }))
    .pipe(gulp.dest(PKG_DIR));
});


/*
 * 静态服务器
 */
gulp.task('bs', function () {
  browserSync.init({
    files: "**", //监听整个项目
    open: false,
    server: {
      baseDir: "./src/",
      index: 'view/index.html'
    }
  });
});

/*
 * 静态服务器(代理)
 */
gulp.task('bsp', function () {
  browserSync.init({
    proxy: "127.0.0.1"
  });
});

/* 
  观察者
*/
gulp.task('auto', function () {
  gulp.watch(SRC_DIR + 'scss/*.scss', ['sass-pc'])
  gulp.watch('./src/**/*.*').on('change', browserSync.reload);
})

/*
 * PC打包方案
 */
gulp.task('pc', gulpSequence(
  'clean', 'sass-pc', 'pkg', 'min-img',
  ['min-img', 'min-css-pc', 'min-js'], 'move-img-other',
  ['rev-img', 'rev-css', 'rev-js'],
  ['col-img', 'col-css', 'col-js', 'col-html'],
  'move-mock', 'bs', 'auto'
));

/*
 * Mobile打包方案
 */
gulp.task('mobile', gulpSequence(
  'clean', 'sass-mobie', 'pkg', 'min-img', 'base64', 'move-img-other',
  ['min-img', 'min-css-mobile', 'min-js'],
  ['rev-img', 'rev-css', 'rev-js'],
  ['col-img', 'col-css', 'col-js', 'col-html'],
  'move-mock', 'bs', 'auto'
));


gulp.task('default', ['pc'], function () {
  return del(['tmp/']);
});

